.box-typical {
    background: #fff
}

.chat-container {
    zoom: 1
}

.chat-container:after, .chat-container:before {
    content: " ";
    display: table
}

.chat-container:after {
    clear: both
}

.chat-list {
    float: left;
    width: 300px;
    position: relative;
    z-index: 2
}

.chat-area {
    float: right;
    width: 100%;
    margin-left: -300px
}

.chat-area-in {
    margin-left: 300px;
    border-left: solid 1px #d8e2e7
}

@media (max-width: 767px) {
    .chat-list {
        float: none;
        width: auto
    }

    .chat-area {
        float: none;
        width: auto;
        margin-left: 0
    }

    .chat-area-in {
        margin-left: 0;
        border-left: none
    }
}

.chat-list-search {
    height: 61px;
    border-bottom: solid 1px #d8e2e7;
    padding: 13px 15px
}

.chat-list-search .form-control {
    height: 34px;
    padding: 8px 15px
}

/* 好友列表 */
.chat-list-item {
    display: block;
    padding: 11px 15px 11px 56px;
    position: relative;
    font-size: .9375rem;
    line-height: 20px;
    cursor: default;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    max-width: 100%;
    min-height: 52px
}

.chat-list-item .chat-list-item-photo {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 32px;
    height: 32px
}

.chat-list-item .chat-list-item-photo img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.chat-list-item .chat-list-item-header {
    position: relative;
    padding: 0 45px 0 0
}

.chat-list-item .chat-list-item-name {
    display: inline-block;
    vertical-align: top;
    font-weight: 600;
    padding: 0 12px 0 0;
    position: relative;
    max-width: 100%
}

.chat-list-item .chat-list-item-name .name {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%
}

.chat-list-item .chat-list-item-date {
    font-size: .875rem;
    position: absolute;
    right: 0;
    top: 0;
    color: #919fa9
}

.chat-list-item .chat-list-item-cont {
    position: relative;
    padding: 0 45px 0 0
}

.chat-list-item .chat-list-item-txt {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.chat-list-item .chat-list-item-txt.writing {
    color: #919fa9
}

.chat-list-item .chat-list-item-count, .chat-list-item .chat-list-item-dot {
    position: absolute;
    right: 0;
    top: 50%
}

.chat-list-item .chat-list-item-count {
    height: 18px;
    line-height: 18px;
    padding: 0 4px;
    text-align: center;
    min-width: 18px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    color: #fff;
    font-weight: 600;
    margin-top: -9px;
    background: #fa424a;
    font-size: .8125rem
}

.chat-list-item .chat-list-item-dot {
    width: 6px;
    height: 6px;
    margin-top: -3px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #adb7be
}

.chat-list-item.online .chat-list-item-name:before {
    content: '';
    width: 6px;
    height: 6px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -3px;
    background: #46c35f
}

.chat-list .chat-list-item:hover, .chat-list-item.selected {
    background-color: #ecf2f5
}

@media (max-width: 767px) {
    .chat-list-in {
        height: 200px !important;
        border-bottom: solid 1px #d8e2e7
    }
}

/* 信息框头部 */
.chat-area-header {
    height: 62px;
    border-bottom: solid 1px #d8e2e7;
    position: relative;
    padding: 0 120px 0 0
}

.chat-area-header .chat-list-item {
    margin: -1px 0
}

.chat-area-header .chat-area-header-action {
    width: 120px;
    position: absolute;
    right: 15px;
    top: 0;
    padding: 20px 0;
    text-align: right
}

.chat-area-header .clean {
    text-align: center;
    line-height: 60px;
    font-weight: 600;
    font-size: 1rem;
    margin-right: -105px
}

/* 输入框按钮 */
.chat-area-bottom {
    padding: 15px;
    border-top: solid 1px #d8e2e7;
    zoom: 1
}

.chat-area-bottom:after, .chat-area-bottom:before {
    content: " ";
    display: table
}

.chat-area-bottom:after {
    clear: both
}

.chat-area-bottom .btn, .chat-area-bottom .caption {
    margin: 2px 12px 2px 0
}

.chat-area-bottom .caption {
    display: inline-block;
    padding: .375rem 0 .375rem 42px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle
}

.chat-area-bottom .write-message {
    position: relative;
}

.chat-area-bottom .write-message .form-group {
    margin-bottom: 10px
}

.chat-area-bottom .write-message .avatar {
    position: absolute;
    left: -3px;
    top: 0;
    width: 32px;
    height: 32px
}

.chat-area-bottom .write-message .avatar img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

@media (max-width: 1199px) {
    .chat-area-bottom .caption {
        padding-left: 0
    }
}

/* 消息 */
.messenger-dialog-area {
    padding: 15px
}

.messenger-message-container, .messenger-message-container .messages ul {
    display: table
}

.messenger-message-container .messages ul {
    padding: 0;
    width: 70%
}

.messenger-message-container.from .messages ul {
    float: right
}

.messenger-message-container .avatar, .messenger-message-container .messages, .messenger-message-container .messages .message, .messenger-message-container .messages .time-ago {
    display: table-cell
}

.messenger-message-container .avatar {
    width: 32px;
    vertical-align: top;
    padding-right: 10px
}

.messenger-message-container.from .avatar {
    padding-right: 0;
    padding-left: 10px
}

.messenger-message-container .messages .message {
    width: 100%
}

.messenger-message-container .messages .message div {
    background: #edf2f6;
    display: inline-block;
    padding: 10px;
    -webkit-border-radius: 22px;
    border-radius: 22px;
    font-size: .95rem
}

.messenger-message-container {
    margin-bottom: 5px;
    width: 100%
}

.messenger-message-container .messages .time-ago {
    vertical-align: middle;
    font-size: .875rem;
    color: #adb7be;
    padding-left: 10px
}

.messenger-message-container.from .messages .time-ago {
    padding-right: 10px;
    white-space: nowrap;
    text-align: right
}

.messenger-message-container.from .messages .message .bg-blue {
    background: #00a8ff
}

.messenger-message-container .messages li {
    list-style: none;
    margin-bottom: 5px
}

.messenger-message-container .messages li:last-child {
    margin-bottom: 0
}

.messenger-message-container.from .messages .message div {
    color: #fff !important
}

.messenger-message-container .avatar img {
    width: 32px;
    height: 32px;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.messenger-message-container.from .messages li {
    float: right
}


